<template>
  <el-container class="hy-container">
    <h1 class="title">华甬产品库</h1>
    <el-input class="searchBar" v-model="searchData" autocomplete="true" autofocus>
      <el-button class="searchButton" slot="append" @click="search(searchData,1)">搜索</el-button>
    </el-input>
    <el-row>
      <el-button style="width: 115px;" disabled>添加产品</el-button>
      <el-button style="width: 115px;" @click.native="goImportPage">完善并审核</el-button>
    </el-row>
    <div class="matchView">
      <div class="produceList" v-loading="!showImage">
        <div
          class="item"
          v-for="(item,index) in produceList"
          :key="index"
          @click="search(item.id,0)"
        >{{item.name}}</div>
      </div>
      <el-image fit="cover" :src="src" style="height:356px">
        <!-- <div slot="error">
          <div class="image-slot">
            <img src="../../assets/images/noImg.png" />
          </div>
        </div>-->
      </el-image>
    </div>
  </el-container>
</template>

<script>
import config from "@/config/index";
import apiMethod from "@/api/apiMethod";
import { login } from "@/api/login";
import store from "@/utils/factory";
import { getRoot } from "@/api/product";
export default {
  computed: {},
  name: "mainPage",
  data() {
    return {
      produceList: [],
      searchData: "",
      showImage: false,
      paginationInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 100
      },
      src: require("@/assets/images/example/main_noBd.png")
    };
  },
  created() {
    this.autoLogin();
  },
  mounted() {},
  methods: {
    search(key, type) {
      if (type == 0) {
        this.$router.push({
          path: "/resultPage",
          query: {
            category: key || ""
          }
        });
        return false;
      }
      this.$router.push({
        path: "/resultPage",
        query: {
          searchKey: key || ""
        }
      });
    },
    getRoot() {
      getRoot()
        .then(res => {
          if (!res.data) {
            return false;
          }
          if (res.data.categories && res.data.categories.length > 0) {
            this.produceList = res.data.categories;
            this.showImage = true;
          }
        })
        .catch(res => {
          this.showImage = true;
        });
    },
    autoLogin() {
      let self = this;
      const formData = new FormData();
      let params = {
        method: apiMethod.login,
        username: config.testUserName,
        password: config.testPassWord
      };
      params = Object.assign(config.commonParmas, params);
      Object.keys(params).forEach(key => {
        formData.append(key, params[key]);
      });
      login(formData).then(res => {
        if (res.data) {
          store.set("access_token", res.data.access_token);
          self.getRoot();
        }
      });
    },
    goImportPage() {
      this.$router.push({
        path: "/importPage"
      });
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.title {
  // text-align: center;
  padding-top: 62px;
  margin: 0;
  font-size: 45px;
}

.searchBar {
  width: 660px;
  margin: 20px auto;
}

.searchButton {
  width: 100px;
  background: #2878ff !important;
  color: #fff !important;
  border: 1px solid #2878ff !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.matchView {
  position: relative;
  width: 890px;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  .produceList {
    font-size: 15px;
    position: absolute;
    height: 356px;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    width: 200px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    .item {
      padding: 6px 0;
      &:hover {
        font-weight: bold;
        color: #2878ff;
        cursor: pointer;
        transition: all 0.3s;
        transform: scale(1.1);
        white-space: nowrap;
      }
    }
  }
}
</style>
